<template>
  <div class="account-list">
    <el-card
      shadow="always"
      :body-style="{ padding: '20px' }"
    >
      <div slot="header">
        <span>账号列表</span>
      </div>
      <!-- 表格 -->
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
        >
        </el-table-column>
        <el-table-column
          prop="account"
          label="账号"
          width="180"
        >
        </el-table-column>
        <el-table-column
          prop="userGroup"
          label="用户组"
          width="180"
          :formatter="formatUserGroup"
        >
        </el-table-column>
        <el-table-column label="日期">
          <template slot-scope="scope">{{
            scope.row.ctime | dateFmt
          }}</template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[1, 3, 5, 50]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
      <!-- btn-gloup -->
      <div style="margin-top: 20px">
        <el-button
          type="danger"
          @click="handleDelAllAccount"
          >批量删除</el-button
        >
        <el-button @click="toggleSelection()">取消选择</el-button>
      </div>

      <!-- 弹出层 -->
      <el-dialog
        title="编辑账号"
        :visible.sync="dialogVisible"
        width="350px"
        :before-close="handleClose"
      >
        <el-form
          :model="editForm"
          label-width="70px"
          size="small"
        >
          <el-form-item label="账号">
            <el-input v-model="editForm.account"></el-input>
          </el-form-item>
          <el-form-item label="用户组">
            <el-select v-model="editForm.userGroup">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <span
          slot="footer"
          class="dialog-footer"
        >
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button
            type="primary"
            @click="handleEditAccount"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>
<script>
import {
  getAccountList,
  delAccount,
  editAccount,
  delAccountBatchdel
} from '@/api/user.js'
export default {
  data() {
    return {
      editForm: {
        account: '',
        userGroup: ''
      },
      options: [
        {
          value: 'super',
          label: '超级管理员'
        },
        {
          value: 'normal',
          label: '普通用户'
        }
      ],
      dialogVisible: false,
      // 总条数
      total: 100,
      // 默认选中第几页、当前页
      currentPage: 1,
      // 每一页的条数
      pageSize: 3,
      tableData: [],
      ids: []
    }
  },
  created() {
    this.getAccountList()
  },
  methods: {
    // 过滤用户组
    formatUserGroup(row) {
      if (row.userGroup === 'super') {
        return '超级管理员'
      } else if (row.userGroup === 'normal') {
        return '普通用户'
      } else {
        return '游客'
      }
    },
    // 获取账号列表数据
    async getAccountList() {
      const res = await getAccountList(this.currentPage, this.pageSize)
      this.tableData = res.data
      this.total = res.total
    },
    // 编辑按钮
    handleEdit(index, row) {
      this.dialogVisible = true
      // 回填
      this.editForm.account = row.account
      this.editForm.userGroup = row.userGroup
      // 设置指定的id,这个id是隐藏的看不到
      this.editForm.id = row.id
    },
    // 点击发送编辑请求
    async handleEditAccount() {
      // console.log(this.editForm)
      await editAccount(this.editForm)
      this.$message({
        type: 'success',
        message: '编辑成功',
        duration: 500,
        onClose: () => {
          // 重新获取数据
          this.getAccountList()
          // 关闭弹窗
          this.dialogVisible = false
        }
      })
    },

    handleClose(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done()
        })
        .catch((_) => {})
    },
    // 每页总条数
    handleSizeChange(size) {
      this.pageSize = size
      this.getAccountList()
    },
    // 跳转指定页
    handleCurrentChange(page) {
      this.currentPage = page
      this.getAccountList()
    },
    // 取消选择
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    // 全选
    handleSelectionChange(val) {
      // 获取需要删除的数据的id列表
      this.ids = val.map((v) => v.id)
      console.log(this.ids)
    },

    // 删除按钮
    async handleDelete(row) {
      // console.log(row)
      await delAccount(row.id)
      this.getAccountList()
    },
    handleDelAllAccount() {
      if (this.ids.length > 0) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            delAccountBatchdel({ ids: this.ids }).then(() => {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              this.getAccountList()
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
      } else {
        this.$message({
          type: 'warning',
          message: '请选择要删除的数据'
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.el-pagination {
  margin-top: 10px;
}
::v-deep .el-form-item {
  width: 250px;
}
</style>
